<template>
  <BaseChart ref="childRef" :option="options" class="chartMainContent"></BaseChart>
</template>
<script setup>
import { nextTick, onMounted, ref, shallowRef, watch } from 'vue'
import BaseChart from '../../../components/baseChart.vue'
const options = shallowRef()
const getBaseOptions = () => {
  return {
    color: ['#02D9FF', '#23EBC2'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (params) {
        return (
          params[0].name +
          '<br>类目一(个)：' +
          -params[0].value +
          '<br>类目二(个)：' +
          params[1].value
        )
      }
    },
    legend: {
      data: ['类目一', '类目二'],
      textStyle: {
        color: '#fff'
      }
    },
    grid: {
      left: '1%',
      right: '1%',
      top: 30,
      bottom: '1%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'value',
        show: false
      }
    ],
    yAxis: [
      {
        type: 'category',
        axisLabel: {
          color: '#fff'
        },
        axisTick: { show: false },
        data: ['数据一', '数据二', '数据三', '数据四', '数据五']
      }
    ],
    series: [
      {
        name: '类目一',
        type: 'bar',
        barWidth: '60%',
        stack: '总量',
        // label: {
        //   normal: {
        //     show: true,
        //     formatter: function (params) {
        //       return -params.value
        //     }
        //   }
        // },
        data: [-1163, -5500, -10000, -15000, -16000]
      },
      {
        name: '类目二',
        type: 'bar',
        barWidth: '60%',
        stack: '总量',
        // label: {
        //   normal: {
        //     show: true
        //   }
        // },
        data: [1337, 5500, 10000, 15000, 16000]
      }
    ]
  }
}
onMounted(() => {
  nextTick(() => {
    const option = getBaseOptions()
    options.value = option
  })
})
</script>

<style scoped lang="scss">
.chartMainContent {
  height: 2.7rem;
}
</style>
